<template>
	<view class="appoint">
		<xbd-pages-content title="个人绩效填报">
			<template #content>
				<view class="content" :style="'minHeight : ' + windowHeight + 'px;'">
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<!-- 指标类型 -->
						<uni-forms-item :label-width="86" required label="指标类型" name="work">
							<view class="input">
								{{work}}
							</view>
						</uni-forms-item>
						<!-- 指标名称 -->
						<uni-forms-item :label-width="86" required label="指标名称" name="name">
							<uni-easyinput v-if="indexType" maxlength="20" :clearable="false" type="text" v-model="formData.name"
							placeholder="请输入工作指标" />
							<view v-else class="name_type" @click="chooseMeasures">
								<view class="choose_type">{{formData.name || '请选择工作指标'}}</view><image class="name_right" src="../../static/images/performance/right.png" mode=""></image>
							</view>
						</uni-forms-item>
						<!-- 数量 -->
						<view class="" v-if="work ==='系统' && num">
							<uni-forms-item  :label-width="86" required label="数量" name="num">
								<uni-easyinput  :clearable="false" type="text" v-model="formData.num"
								placeholder="请输入数量" />
							</uni-forms-item>
						</view>
						
						<!-- 指标性质 -->
						<uni-forms-item v-if="indexType" :label-width="86" required label="指标性质" name="name">
							<xbd-select :carId.sync="formData.nature" :visible.sync="visible1"
								:infoList="typeArr1"  @selectNature='selectNature'>
								<template>
									<view class="select" @click="visible1 = true">
										<view class="text" v-if="formData.nature.length!==0"> {{formData.nature || '请选择指标性质'}} </view>
										<view class="text prColor" v-else> 请选择指标性质 </view>
										<image class="image" src="@/static/images/health/right.svg" mode="">
										</image>
									</view>
								</template>
							</xbd-select>
						</uni-forms-item>
						<!--备注 -->

						<!-- 开始时间 -->
						<!-- #ifdef APP-PLUS || H5 -->
						<view class="date">
							<uni-forms-item :label-width="86" required label="开始时间" name="dateSta">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateSta" :start="startDate"
										:end="endDate" @change="bindDateChangeSta">
										<view class="uni-input">
											<view class="">
												<image src="../../static/images/date2.svg"></image>
												<text>{{formData.dateSta}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="0" name="timeSta">
								<view class="box">
									<picker mode="time" :value="formData.timeSta" @change="bindTimeChangeSta">
										<view class="uni-input">
											<view class="">
												<image class="date3" src="../../static/images/date3.svg"></image>
												<text>{{formData.timeSta}}</text>
											</view>
										</view>
									</picker>

								</view>
							</uni-forms-item>
						</view>
						<view class="date">
							<uni-forms-item :label-width="86" required label="结束时间" name="dateEnd">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateEnd" :start="startDate"
										:end="endDate" @change="bindDateChangeEnd">
										<view class="uni-input">
											<view class="">
												<image src="../../static/images/date2.svg"></image>
												<text>{{formData.dateEnd}}</text>
											</view>
										</view>
									</picker>

								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="0" name="timeEnd">
								<view class="box">
									<picker mode="time" :value="formData.timeEnd" @change="bindTimeChangeEnd">
										<view class="uni-input">
											<view class="">
												<image class="date3" src="../../static/images/date3.svg"></image>
												<text>{{formData.timeEnd}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
						</view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS || H5 -->
							<uni-forms-item :label-width="86" required label="开始时间" name="dateSta">
								<picker fields="day" mode="date" :value="formData.dateSta"
									@change="bindDateChangeSta">
									<view class="smoll_date">
										<view >
											<image src="../../static/images/date2.svg"></image>
											<text >{{formData.dateSta}}</text>
										</view>
									</view>
								</picker>
							</uni-forms-item>
							<uni-forms-item :label-width="86"  required label="结束时间" name="dateEnd">
							<picker fields="day" mode="date" :value="formData.dateEnd" :start="formData.dateSta"
								@change="bindDateChangeEnd">
								<view class="smoll_date">
									<view>
										<image src="../../static/images/date2.svg"></image>
										<text >{{formData.dateEnd}}</text>
									</view>
								</view>
							</picker>

							</uni-forms-item>
						<!-- #endif -->
						<uni-forms-item class="area" :label-width="86" required label="备注" name="reason">
							<uni-easyinput :clearable="false" class="textarea" type="textarea" v-model="formData.reason"
								placeholder="请填写备注" :maxlength="100">
							</uni-easyinput>
							<!-- #ifdef APP-PLUS || H5 -->
							<view class="mit">
								字数限制：100
							</view>
							<!-- #endif -->
						</uni-forms-item>
					</uni-forms>
					<view class="foot">
						<view class="btns">
							<button type="default" class="draft" @click="cancel">取消</button>
							<button type="default" class="upload" @click="submit">确认</button>
						</view>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { Performance } from '@/api/index.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				id:'',
				num:false,
				flag:true,
				visible:false,
				visible1:false,
				amount:'',
				detail_id:'',
				work: '',
				back_reason:'',
				typeArr: [
					{
						value: '1',
						label: '系统'
					},
					{
						value: '2',
						label: '偶发性事件'
					}
				],
				typeArr1: [
					{
						value: '0',
						label: '日常工作'
					},
					{
						value: '1',
						label: '周期性工作'
					},
					{
						value: '2',
						label: '阶段性工作'
					}
				],
				work_target1:'',
				work_nature1:'',
				formData: {
					name:'',
					num:0,
					nature:'',
					reason: '',
					// #ifdef APP-PLUS || H5
					dateSta: currentDate,
					dateEnd: currentDate,
					timeSta: '08:00',
					timeEnd: '19:00',
					// #endif 
					// #ifndef APP-PLUS || H5 
					dateSta: currentDate + ' 08:00',
					dateEnd: currentDate + ' 19:00',
					// #endif
				},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '指标名称：请输入工作指标',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.indexOf(" ") !== -1) {
										callback('指标名称：请输入工作指标');
									}
									return true
								}
							}
						]
					},
					num: {
						rules: [{
								required: true,
								errorMessage: '数量：请输入数量',
							},
							{
								pattern: '^[0-9]\\d*$',
								errorMessage: '数量：请输入大于等于0的整数',
							}
						]
					},
					nature: {
						rules: [{
								required: true,
								errorMessage: '指标性质：请选择指标性质',
							}
						]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '备注：请填写备注',
						}],
						validateTrigger: 'bind'
					},
					dateSta: {
						rules: [{
							required: true,
							errorMessage: '开始时间：请选择开始日期',
						}]
					},
					dateEnd: {
						rules: [{
								required: true,
								errorMessage: '结束时间：请选择结束日期',
							},
							{
								// #ifdef APP-PLUS || H5
								validateFunction: (rule, value, data, callback) => {
									if (value < this.formData.dateSta) {
										callback('结束时间：请重新选择结束时间')
									}
									return true
								}
								// #endif
								// #ifndef APP-PLUS || H5
								validateFunction: (rule, value, data, callback) => {
									if (value <= this.formData.dateSta) {
										callback('结束时间：请重新选择结束时间')
									}
									return true
								}
								// #endif
							}
						]
					},
					timeSta: {
						rules: [{
							required: true,
							errorMessage: '开始时间：请选择入住时间',
						}]
					},
					timeEnd: {
						rules: [{
								required: true,
								errorMessage: '结束时间：请选择结束时间',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									console.log(value)
									if (this.formData.dateSta === this.formData.dateEnd && value <= this.formData
										.timeSta) {
										callback('结束时间：请重新选择结束时间')
									}
									return true
								}
							}
						]
					},
				}
			};
		},
		methods: {
			eventCallback(val){
				this.formData.name = val.label
				this.amount = val.amount
				if(val.id !== 'indicator_191'){
					this.num = true
				} else{
					this.num = false
				}
				this.work_target1 = val.id.replace(/[^0-9]/ig,"");
				console.log(val)
				console.log(this.work_target1,'this.work_target1')
			},
			selectNature(val){
				this.work_nature1= val
			},
			chooseMeasures(){
				uni.navigateTo({
					url: `./performanceMeasures?msg=1`,
				})
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			bindDateChangeSta: function(e) {
				this.formData.dateSta = e.target.value
			},
			bindDateChangeEnd: function(e) {
				this.formData.dateEnd = e.target.value
			},
			bindTimeChangeSta: function(e) {
				this.formData.timeSta = e.target.value
			},
			bindTimeChangeEnd: function(e) {
				this.formData.timeEnd = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},


			async submit(val) {
				if (!this.work) {
					 return this.$showToast('请选择指标类型');
				}
				
				this.$refs.form.setRules(this.rules);
				const info = {
					id:this.id,
					assess_detail_id:this.detail_id,
					work_target:this.formData.name, //指标类型
					performance_type : this.work, //工作指标
					work_nature:this.formData.nature, //指标性质
					note: this.formData.reason, //备注
					// #ifdef APP-PLUS || H5 
					start_time: this.formData.dateSta + ' ' + this.formData.timeSta ,//开始时间
					end_time: this.formData.dateEnd + ' ' + this.formData.timeEnd,//结束时间
					// #endif 
					// #ifndef APP-PLUS || H5
					start_time: this.formData.dateSta ,//开始时间
					end_time: this.formData.dateEnd,//结束时间
					// #endif 
					amount:this.formData.num,
					work_target1:this.work_target1,
					work_nature1:this.work_nature1
				};
				console.log(info)
				try {
					const valid = await this.$refs.form.validate();
					if(this.flag){
					try {
						this.flag = false
						this.$showLoading('加载中');
							const res =  await Performance.getPerformanceUpdate(info);
							uni.hideLoading();
							console.log(res,'修改')
							if(res.data.success){
								uni.$emit('refresh');
								uni.showToast({
										title: '您的申请保存成功！',
										icon: 'none',
									})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1000)
							}else {
								this.flag = true
								uni.showToast({
										title: res.data.msg,
										icon: 'none',
									})
							}
							
						
						
					} catch (err) {
						this.flag = true
						uni.hideLoading();
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
					};
				} catch (err) {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				}
			},
				
			async init(){
				try{
					this.$showLoading('加载中');
					const res = await Performance.getThirdOther(this.detail_id);
					uni.hideLoading();
					console.log(res)
					const detail = res.data.details
					console.log(detail,'detail')
					this.formData.reason = detail.note
					this.formData.name = detail.work_target
					this.work = detail.performance_type
					this.formData.nature = detail.work_nature
					this.formData.dateSta = detail.start_time
					this.formData.dateEnd = detail.end_time
					this.amount = detail.amount 
					this.formData.num = detail.amount 
					this.work_target1=detail.work_target1
					this.work_nature1=detail.work_nature1
					this.work_target1 ===191 ? this.num=false : this.num=true
					console.log('back',this.formData)
					console.log('this.work_target1',this.work_target1)
				}catch(e){
					//TODO handle the exception
				}
			},
			

		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		computed: {
			...mapState(['windowHeight', 'userInfo']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			indexType(){
				 if(this.work === '系统'){
					  console.log('true')
					 return false
				 }else {
					 console.log('false')
					 return true
				 }
			},
			// num(){
			// 	if( && this.work_target1 !==191){
			// 		return true
			// 	}else{
			// 		return false
			// 	}
				
			// }
		},
		// watch: {
		// 		work(val) {
		// 			console.log('变了',val);
		// 			if(val === '偶发性事件'){
		// 				true
		// 			}else {
		// 			 return false
		// 			}
		// 		}
		// 	},
		async onLoad(res) {
			console.log(res)
			this.id = res.id
			this.detail_id = res.detail_id
			await this.init()
			uni.$on('chooseTree',this.eventCallback)
		},
		onUnload() {
			uni.$off('chooseTree');
		},
		
	}
</script>

<style lang="scss" scoped>
	::v-deep uni-button:after {
		border: none !important;
	}

	::v-deep .uni-error-message {
		z-index: -1;
	}

	::v-deep .is-input-error-border {
		border-color: #888888 !important;
	}

	::v-deep .easy-select {
		padding-left: 20rpx !important;
	}

	::v-deep .is-input-border {
		border-color: #888888 !important;
		color: #999999;
	}

	::v-deep .data-v-2f345629 {
		white-space: nowrap;
	}

	::v-deep .data-v-abe12412 {
		border-radius: 8rpx;
		color: #999999 !important;
	}

	::v-deep .uni-input {
		white-space: nowrap;
	}

	::v-deep .uni-forms-item__inner {
		box-sizing: border-box;
		padding-bottom: 6px;
	}
	::v-deep .uni-easyinput__content-input  {
		font-size: 32rpx ;
	}
	::v-deep .uni-forms-item__label .label-text{
		font-size: 32rpx;
	}
	::v-deep .uni-easyinput__content-textarea{
		font-size: 28rpx;
	}

	::v-deep .data-v-61dfc0d0 {
		box-sizing: border-box;
		padding-bottom: 6px;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 28rpx;
	}
	::v-deep .uni-forms-item__label {
		box-sizing: border-box;
		padding-top: 20rpx !important;
	}

	::v-deep .data-v-5b0f8e3c {
		font-size: 28rpx;
	}

		
	.content {
		// margin-top: 10px;
		padding: 50rpx;
		background-color: #FFFFFF;
		.top{
			padding: 40rpx 10rpx;
			border-bottom: 2rpx solid #999999;
			box-sizing: border-box;
			display: flex;
			color: #194769;
			font-size: 32rpx;
			margin-bottom: 40rpx;
			.topType{
				width: 420rpx;
				font-size: 28rpx;
				word-break:break-all;
				color:#000000;
			}
		}
	}


	.input {
		height: 60rpx;
		line-height: 54rpx;
		border: 1px solid #999999;
		border-radius: 5px;
		padding-left: 20rpx;

		font-size: 28rpx;

		color: #999999;
	}


	.foot {
		margin-top: 80rpx;

		.btns {
			display: flex;
			justify-content: space-between;

			button {
				width: 300rpx;
				height: 30px;
				line-height: 30px;
				font-size: 28rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}

			.draft {
				color: #FFFFFF;
				margin-right: 50rpx;
				background: url(../../static/images/meal/gary.png) no-repeat;
				background-size: 100% 100%;
			}

			.upload {
				background: url(../../static/images/common/bluebg.png) no-repeat;
				background-size: 100% 100%;
				color: $uni-text-color-inverse;
			}
		}
	}
	.select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		height: 64rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		border: 2rpx solid #999999;
		box-sizing: border-box;
		padding: 0 20rpx 0 20rpx;
		// color: #BBC0C9 !important;
	
		.text {
			flex: 1;
			color: #999999;
			// text-align: center;
			
		}
		.prColor{
			color: #999999 !important;
		}
	
		.image {
			transform: rotate(90deg);
			width: 38rpx;
			height: 38rpx;
		}
	}

	.date {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.box {
			width: 200rpx;
			box-sizing: border-box;
			padding-right: 16rpx;
			height: 28px;
			line-height: 28px;
			border: 1px solid #999999;
			border-radius: 4px;
			// margin-right: 20rpx;

			.uni-input {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #999999;

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 4rpx;
				}

				.date3 {
					vertical-align: sub;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.smoll_date {
		display: flex;
		align-items: center;
		height: 32px;
		
		font-size: 28rpx;
		width: 100% !important;
		border: 2rpx solid #999999;
		border-radius: 8rpx;
		color: #999999;
		box-sizing: border-box;
	
		image {
			vertical-align: sub;
			width: 28rpx;
			height: 28rpx;
			margin:0 24rpx 4rpx 24rpx;
		}
	}

	.textarea {
		width: 100%;
		height: 100px;
		border-radius: 8rpx;
		box-sizing: border-box;
		font-size: 32rpx;

		color: #999999;
	}
	.name_type{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		width: 100%;
		height: 64rpx;
		// line-height: 60rpx;
		border: 2rpx solid #999999;
		border-radius: 8rpx;
		color: #999999;
		.choose_type{
			width: 360rpx;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
		.name_right{
			width: 48rpx;
			height: 48rpx;
			color: #999999;
		}
	}

	.area {
		position: relative;

		.mit {
			position: absolute;
			bottom: 20px;
			right: 30rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

		.phones {
			display: flex;
			flex-direction: column;
			
			margin-top: 4px;
			padding-left: 10rpx;
			
			font-size: 32rpx;
			color: #323232;
			text {
				margin-bottom: 10px;
			}
			.images {
				width: 690rpx;
				display: flex;
				flex-wrap: wrap;
				.addphone {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
					margin-bottom: 40rpx;
					border-radius: 8rpx;
					background-color: #FFFFFF;
					box-sizing: border-box;
					border: 2rpx solid #D9D9D9;
					color: #BCBCBC;
				}
				.img-content {
					margin-right: 20rpx;
					position: relative;
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 40rpx;
					.iconfont {
						position: absolute;
						top: -6px;
						right: -12rpx;
						width: 48rpx;
						height: 48rpx;
						
						color: $uni-color-primary;
					}
				}
				.addimage {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					margin-bottom: 40rpx;
				}
			}
		}
</style>
